<template>
	<view class="coupon">
		<u-navbar :titleStyle="{fontWeight:'bold'}" title="优惠券" />
		<view class="coupon-tabs">
			<u-tabsw :active-item-style="{color:'#000'}" :list="list" allBold active-color="#FFCF4F"
				inactive-color="#666666" :is-scroll="false" :current="current" @change="change"></u-tabsw>
		</view>
		<view class="coupon-list">
			<coupon mode="1" :disabled="current!=0?true:false" v-for="item in coupon" :key="item.id" :item="item"/>
			<listempty mode="coupon" vh="300px" text="暂无优惠券记录" :list="coupon" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '未使用',
						activeState: 'wait_use'
					},
					{
						name: '已使用',
						activeState: 'used'
					},
					{
						name: '已过期',
						activeState: 'invalid'
					}
				],
				coupon:[],
				current: 0,
				limit: 8,
				page: 1,
				total_page:0
			};
		},
		onLoad() {
			this.getCoupon()
		},
		onReachBottom(){
			if(!this.dropdown(this.page,this.total_page)){
				this.page++
				this.getCoupon()
			}
		},
		methods: {
			getCoupon() {
				this.showLoding()
				this.$network('/api/coupon/myCoupon', {
					activeState: this.list[this.current].activeState,
					page: this.page,
					limit: this.limit
				}).then(res => {
					const { list,total_page } = res.data
					if (this.page != 1){
						this.coupon = [...this.coupon,...list]
					}else{
						this.coupon = list
					}
					this.total_page = total_page
				}).finally((e) => {
					this.$nextTick(() => {
						this.showhideloding()
					})
				})
			},
			change(e) {
				this.page = 1
				this.current = e
				this.coupon = []
				this.getCoupon()
			}
		}
	}
</script>

<style lang="scss">
	.coupon-list {
		padding: 0 20px;
	}
</style>
